<template>
  <div id="dakmeansstrategy">
    <el-steps :active=2 simple style="margin-bottom: 10px">
      <el-step title="简介" icon="el-icon-info"></el-step>
      <el-step title="上传" icon="el-icon-upload2"></el-step>
      <el-step title="策略及参数" icon="el-icon-setting"></el-step>
      <el-step title="结果及可视化" icon="el-icon-finished"></el-step>
    </el-steps>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column v-for="(data,index) in tableData[0]" :prop="index" :key="index">
        <template slot="header" slot-scope="scope">
          <el-switch
            v-model="isUse[index]"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="丢失值处理">
        <el-select v-model="pre" placeholder="默认忽略元组">
          <el-option label="忽略元组" value="0"></el-option>
          <el-option label="中位数" value="1"></el-option>
          <el-option label="平均值" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="簇数量k">
        <el-input placehoder="设置k值" v-model="k" clearable></el-input>
      </el-form-item>
      <el-form-item label="距离计算">
        <el-select v-model="linkage" placeholder="默认均链接">
          <el-option label="均链接" value="0"></el-option>
          <el-option label="全链接" value="1"></el-option>
          <el-option label="单链接" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="邻域大小ε">
        <el-input placehoder="设置ε值" v-model="epsilon" clearable></el-input>
      </el-form-item>
      <el-form-item label="核心对象最小点数minPts">
        <el-input placehoder="设置minPts值" v-model="minPts" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">开始聚类</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DAKMeansStrategy",
  data() {
    return {
      pre: "0",
      linkage: "0",
      epsilon: "",
      minPts: "",
      use: [],
      k: "",
      tableData: [],
      isUse: {
        c0: true,
        c1: true,
        c2: true,
        c3: true,
        c4: true,
        c5: true,
        c6: true,
        c7: true,
        c8: true,
        c9: true,
        c10: true,
        c11: true,
        c12: true,
        c13: true,
        c14: true,
        c15: true,
        c16: true,
        c17: true,
        c18: true,
        c19: true
      }
    }
  },
  methods: {
    onSubmit() {
      var hasChar = false;
      var tmpMPF = parseFloat(this.minPts);
      var tmpMPI = parseInt(this.minPts);
      var epsilon = parseFloat(this.epsilon);
      var tmpKF = parseFloat(this.k);
      var tmpKI = parseInt(this.k);
      for (let key in this.tableData[0]) {
        if (this.isUse[key]) {
          if (this.tableData[0][key][0] > '9' || this.tableData[0][key][0] < '0') {
            hasChar = true;
          }
          this.use.push(key)
        }
      }
      if (this.use.length == 0) {
        this.$notify({
          title: '没有参与聚类的数据',
          message: "至少选择一列数据",
          type: "error"
        })
      } else if (hasChar) {
        this.$notify({
          title: '存在离散型数据',
          message: "目前仅支持连续性数据",
          type: "warning"
        })
      } else if (this.k == "") {
        this.$notify({
          title: '没有设置K',
          message: "请设置k为大于1且小于数据大小整数",
          type: "error"
        })
      } else if (tmpKI != tmpKF || tmpKI < 2) {
        this.$notify({
          title: '输入的K不符规定',
          message: "请设置k为大于1且小于数据大小整数",
          type: "error"
        })
      } else if (this.epsilon == "") {
        this.$notify({
          title: '没有设置ε',
          message: "请设置ε为正数",
          type: "error"
        })
      } else if (this.minPts == "") {
        this.$notify({
          title: '没有设置minPts',
          message: "请设置minPts为大于1的整数",
          type: "error"
        })
      } else if (tmpMPI != tmpMPF || tmpMPI < 2) {
        this.$notify({
          title: '输入的K不符规定',
          message: "请设置minPts为大于1的整数",
          type: "error"
        })
      } else if (epsilon <= 0) {
        this.$notify({
          title: '输入的ε不符规定',
          message: "请设置ε为正数",
          type: "error"
        })
      } else {
        axios.post("http://localhost:8080/dakmeans/params?k=" + this.k + "&linkage=" + this.linkage + "&epsilon=" + this.epsilon + "&minpts=" + this.minPts).then(
          function (response) {
            console.log(response.data)
          }, function (err) {
          })
        axios.post("http://localhost:8080/dakmeans/strategy?pre=" + this.pre).then(
          function (response) {
            console.log(response.data)
          }, function (err) {
          })
        axios.post("http://localhost:8080/dakmeans/columns?cols=" + this.use).then(
          function (response) {
            console.log(response.data)
            location.replace("#/dakmeans/do")
          }, function (err) {
          })
      }
      this.use = []
    }
  },
  mounted() {
    var that = this;
    axios.post("http://localhost:8080/dakmeans/preview").then(
      function (response) {
        that.tableData = response.data;
      }, function (err) {
      })
  }
}
</script>

<style scoped>

</style>
